<template>
  <div>
      <!-- 面包屑导航 -->
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ name:'rights'}" >权限管理</el-breadcrumb-item>
  <el-breadcrumb-item :to="{name:'rights'}">权限列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
    <el-table :data="rightsList" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path">
            <template v-slot="scope">
                <!-- 这里不是通过prop将path数据传入的它的子组件吗，数据由于在子组件，（也可以用父组件自己渲染）
                     我们可以用作用域插槽将这一行的数据渲染成我们想要的数据
                     制定v-slot将子组件的数据获取到父组件（就是现在的组件），再通过模板语法渲染成我们想要的样子
                     下面的同理
                 -->
                {{'/home/'+scope.row.path}}
            </template>
        </el-table-column>
        <el-table-column label="等级" prop="level">
            <template v-slot="scope">
                <el-tag v-if="scope.row.level === '0'">一级</el-tag>
                <el-tag v-if="scope.row.level === '1'" type="sussess">二级</el-tag>
                <el-tag v-if="scope.row.level === '2'" type="warning">三级</el-tag>
            </template>
        </el-table-column>
    </el-table>
</el-card>
  </div>
</template>

<script>
export default {
    data(){
        return {
            // 权限列表数据
            rightsList:[]
        }
    },
    created(){
        // 获取权限列表
        this.getRightsList()
    },
    methods:{
        // 获取请求列表的方法
        async getRightsList(){
            // 请求权限列表数据
           const {data:res} = await this.$http.get('rights/list')
            //    判断是否请求成功
           if(res.meta.status !==200) return this.$message.error('获取权限列表失败')
            //    将请求成功的值赋值给data中
           this.rightsList = res.data;
        }
    }
}
</script>

<style>

</style>